<%= if @has_qa_runs do %>
  <div id="qa">
    <.card title={gettext("Analytics")} icon="chart_arcs" data-part="analytics">
      <:actions>
        <.dropdown
          id="qa-analytics-app-dropdown"
          label={@analytics_app_label}
          secondary_text={gettext("App:")}
        >
          <.dropdown_item
            value="any"
            label="Any"
            patch={"?#{TuistWeb.Utilities.Query.put(@uri.query, "analytics_app", "any")}"}
            data-selected={@analytics_app == "any"}
          >
            <:right_icon><.check /></:right_icon>
          </.dropdown_item>
          <.dropdown_item
            :for={{app_name, app_label} <- @available_apps}
            value={app_name}
            label={app_label}
            patch={"?#{TuistWeb.Utilities.Query.put(@uri.query, "analytics_app", app_name)}"}
            data-selected={@analytics_app == app_name}
          >
            <:right_icon><.check /></:right_icon>
          </.dropdown_item>
        </.dropdown>
        <.button_group size="large">
          <.button_group_item
            patch={"?#{TuistWeb.Utilities.Query.put(@uri.query, "analytics_date_range", "last_7_days")}"}
            label={gettext("7 days")}
            data-selected={@analytics_date_range == "last_7_days"}
          />
          <.button_group_item
            patch={"?#{TuistWeb.Utilities.Query.put(@uri.query, "analytics_date_range", "last_30_days")}"}
            label={gettext("30 days")}
            data-selected={@analytics_date_range == "last_30_days"}
          />
          <.button_group_item
            patch={"?#{TuistWeb.Utilities.Query.put(@uri.query, "analytics_date_range", "last_12_months")}"}
            label={gettext("12 months")}
            data-selected={@analytics_date_range == "last_12_months"}
          />
        </.button_group>
      </:actions>
      <div data-part="widgets">
        <.widget
          title={gettext("QA runs")}
          description={
            gettext(
              "QA runs represent the number of QA test sessions executed during a given period."
            )
          }
          value={@qa_runs_analytics.count}
          id="widget-qa-run-count"
          trend_value={@qa_runs_analytics.trend}
          trend_type={:neutral}
          trend_label={@analytics_trend_label}
          phx_click="select_widget"
          phx_value_widget="qa_run_count"
          selected={@analytics_selected_widget == "qa_run_count"}
          empty={@qa_runs_analytics.count == 0}
        />
        <.widget
          title={gettext("App issues found")}
          description={
            gettext(
              "App issues found represents the total number of issues discovered during QA testing in a given period."
            )
          }
          value={@qa_issues_analytics.count}
          id="widget-qa-issues-count"
          trend_value={@qa_issues_analytics.trend}
          trend_label={@analytics_trend_label}
          trend_type={:inverse}
          phx_click="select_widget"
          phx_value_widget="qa_issues_count"
          selected={@analytics_selected_widget == "qa_issues_count"}
          empty={@qa_runs_analytics.count == 0}
        />
        <.widget
          title={gettext("Avg. QA duration")}
          description={
            gettext(
              "Average QA duration represents the average time it took to complete a QA session during a given period."
            )
          }
          value={
            gettext("%{qa_average_duration}s",
              qa_average_duration:
                (@qa_duration_analytics.total_average_duration / 1000)
                |> Decimal.from_float()
                |> Decimal.round(1)
            )
          }
          id="widget-qa-duration"
          trend_value={@qa_duration_analytics.trend}
          trend_label={@analytics_trend_label}
          trend_type={:inverse}
          phx_click="select_widget"
          phx_value_widget="qa_duration"
          selected={@analytics_selected_widget == "qa_duration"}
          empty={@qa_runs_analytics.count == 0}
        />
      </div>
      <.card_section :if={@qa_runs_analytics.count != 0}>
        <div data-part="analytics-chart">
          <.chart
            id="qa-analytics-chart"
            type="line"
            extra_options={
              %{
                grid: %{
                  width: "93%",
                  left: "0.4%",
                  right: "7%",
                  height: "88%",
                  top: "5%"
                },
                xAxis: %{
                  boundaryGap: false,
                  type: "category",
                  axisLabel: %{
                    color: "var:noora-surface-label-secondary",
                    formatter: "fn:toLocaleDate",
                    customValues: [
                      @analytics_chart_data.dates |> List.first(),
                      @analytics_chart_data.dates |> List.last()
                    ],
                    padding: [10, 0, 0, 0]
                  }
                },
                yAxis: %{
                  splitLine: %{
                    lineStyle: %{
                      color: "var:noora-chart-lines"
                    }
                  },
                  axisLabel: %{
                    color: "var:noora-surface-label-secondary",
                    formatter: @analytics_chart_data.value_formatter
                  }
                },
                tooltip: %{
                  valueFormat: @analytics_chart_data.value_formatter
                },
                legend: %{
                  show: false
                }
              }
            }
            series={[
              %{
                data:
                  Enum.zip(
                    @analytics_chart_data.dates,
                    @analytics_chart_data.values
                  )
                  |> Enum.map(&Tuple.to_list/1),
                name: @analytics_chart_data.name,
                type: "line",
                smooth: 0.1,
                symbol: "none"
              }
            ]}
            y_axis_min={0}
          />
        </div>
      </.card_section>
      <.empty_card_section :if={@qa_runs_analytics.count == 0} title={gettext("No data yet")}>
        <:image>
          <img src="/images/empty_line_chart_light.png" data-theme="light" />
          <img src="/images/empty_line_chart_dark.png" data-theme="dark" />
        </:image>
      </.empty_card_section>
    </.card>
    <.card title={gettext("QA Sessions")} icon="devices_code" data-part="qa-runs">
      <.card_section data-part="qa-runs-section">
        <div :if={not Enum.empty?(@qa_runs)} data-part="qa-runs-table">
          <.table
            id="qa-runs-table"
            rows={@qa_runs}
            row_navigate={
              fn run ->
                url(~p"/#{@selected_project.account.name}/#{@selected_project.name}/qa/#{run.id}")
              end
            }
          >
            <:col :let={run} label={gettext("Name")}>
              <.text_cell label={run.app_build.preview.display_name} />
            </:col>
            <:col :let={run} label={gettext("Status")}>
              <.badge_cell
                label={
                  case run.status do
                    "running" -> gettext("Running")
                    "pending" -> gettext("Pending")
                    "failed" -> gettext("Failed")
                    "completed" -> gettext("Completed")
                  end
                }
                color={
                  case run.status do
                    "running" -> "attention"
                    "pending" -> "information"
                    "failed" -> "destructive"
                    "completed" -> "primary"
                  end
                }
                style="light-fill"
              />
            </:col>
            <:col :let={run} label={gettext("Platform")}>
              <.platform_cell platform={
                run.app_build.preview.supported_platforms
                |> Preview.map_simulators_to_devices()
                |> List.first()
              } />
            </:col>
            <:col :let={run} label={gettext("Issues")}>
              <% issue_count = length(Enum.flat_map(run.run_steps, & &1.issues)) %>
              <.badge_cell
                label={"#{issue_count} #{ngettext("issue", "issues", issue_count)}"}
                color={if issue_count > 0, do: "warning", else: "success"}
                style="light-fill"
                icon={if issue_count > 0, do: "alert_hexagon", else: "check"}
              />
            </:col>
            <:col :let={run} label={gettext("Branch")}>
              <.text_cell
                icon="git_branch"
                label={run.app_build.preview.git_branch || gettext("None")}
              />
            </:col>
            <:col :let={run} label={gettext("Commit SHA")}>
              <.text_cell label={SHA.format_commit_sha(run.app_build.preview.git_commit_sha)} />
            </:col>
            <:col :let={run} label={gettext("Duration")}>
              <.text_cell :if={is_nil(run.finished_at)} label={gettext("In progress")} />
              <.text_cell
                :if={not is_nil(run.finished_at)}
                icon="history"
                label={
                  DateFormatter.format_duration_from_milliseconds(
                    DateTime.diff(run.finished_at, run.inserted_at, :millisecond),
                    include_seconds: false
                  )
                }
              />
            </:col>
            <:col :let={run} label={gettext("Started at")}>
              <.text_cell label={DateFormatter.from_now(run.inserted_at)} />
            </:col>
          </.table>
          <.pagination
            uri={@uri}
            has_previous_page={Map.get(@qa_runs_meta, :has_previous_page?, false)}
            has_next_page={Map.get(@qa_runs_meta, :has_next_page?, false)}
            start_cursor={Map.get(@qa_runs_meta, :start_cursor)}
            end_cursor={Map.get(@qa_runs_meta, :end_cursor)}
          />
        </div>

        <div :if={Enum.empty?(@qa_runs)} data-part="empty-qa-runs">
          <.empty_card_section
            title={gettext("No QA runs yet")}
            data-part="empty-qa-runs-table-card-section"
          >
            <:image>
              <img src="/images/empty_table_light.png" data-theme="light" />
              <img src="/images/empty_table_dark.png" data-theme="dark" />
            </:image>
          </.empty_card_section>
        </div>
      </.card_section>
    </.card>
  </div>
<% else %>
  <div id="qa-empty-state">
    <div data-part="background">
      <div data-part="illustration">
        <!-- Replace the static images with SVG backgrounds -->
        <div data-theme="light">
          <.empty_state_light_background />
        </div>
        <div data-theme="dark">
          <.empty_state_dark_background />
        </div>
      </div>
    </div>
    <div data-part="content">
      <.card_section data-part="step-one">
        <div data-part="header">
          <span data-part="title">
            {gettext("1. Upload a preview from a PR")}
          </span>
          <span data-part="subtitle">
            {gettext(
              "Upload a preview from a PR to kick off the QA session, following the instructions in the documentation below."
            )}
          </span>
        </div>
        <.button
          data-part="documentation-button"
          label={gettext("Tuist documentation")}
          variant="primary"
          size="large"
          href="https://docs.tuist.dev/en/guides/features/qa"
          target="_blank"
        >
          <:icon_right><.chevron_right /></:icon_right>
        </.button>
      </.card_section>

      <.card_section data-part="step-two">
        <div data-part="header">
          <span data-part="title">
            {gettext("2. Trigger the QA session from the PR")}
          </span>
          <span data-part="subtitle">
            {gettext("Start the QA session from GitHub with the sample command below.")}
          </span>
        </div>
        <.terminal
          id="qa-empty-state-terminal"
          title={gettext("GitHub comment")}
          command="/tuist qa <prompt for the agent>"
        />
      </.card_section>
    </div>
  </div>
<% end %>
